<template>
  <div class="menu">
    <!-- 操作栏 -->
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :initSearch="true"
      :hideSelect="true"
      :form="form"
      :paginations="paginations"
      :default-params="defaultParams">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="分类名称">
            <a-input v-decorator="['name']" placeholder="请输入分类名称">
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <a-button
          type="primary"
          icon="plus"
          @click="classifyAdd(false, {})"
        >
        新增分类
        </a-button>
      </template>
    <template slot="tableOperation" slot-scope="{ record }">
      <permission
        authority="poster:classification:add"
        v-if="record.parentId ==='0' && record.hasTwoCategory == 1"
      >
        <span
          class="text-primary pointer"
          @click="classifyAdd(true, record)"
          >添加子集</span
        >
      </permission>
      <a-divider
        v-if="record.parentId ==='0' && record.hasTwoCategory == 1"
        type="vertical"
      />
      <permission
        authority="poster:classification:modify"
      >
        <span
          class="text-primary pointer"
          @click="classifyUpdate(record)"
          >编辑</span
        >
      </permission>
      <a-divider type="vertical" />
      <permission authority="poster:classification:delete">
        <span class="text-danger pointer" @click="deleteRows(record)">删除</span>
      </permission>
    </template>
  </search-table>
    <!-- 菜单表单弹窗 -->
    <menu-info 
      :parentId="parentId" 
      :record="currentRecord" 
      :childModal="childModal"
      :handle="handle"
      :parentInfo="parentInfo"
      @cancel="closeInfoModal" 
      :visible="infoVisible" 
    />
  </div>
</template>
<script>
import MenuInfo from './components/MenuInfo'
export default {
  name: 'GalleryPosterClassify',
  components: {
    // Permission,
    MenuInfo
  },
  data() {
    return {
      url: 'goldenhome/gh/poster_admin/poster/category/page',
      form: this.$form.createForm(this, { name: "table_search" }),
      defaultParams: {},
      infoVisible: false, // 是否显示菜单信息弹窗
      tableLoading: false, // 菜单表格等待状态·
      currentRecord: {}, // 选中行数据
      childModal: true, //是否添加子集
      handle: 'add',
      parentId: '', // 父级id
      paginations: {
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        current: 1,
        size: 10,
        total: 50,
      },
      columns:  [
        {
          title: '分类名称',
          key: 'name',
          dataIndex: "name",
          width: "40%"
        },
        {
          title: '排序',
          key: 'sort',
          dataIndex: "sort",
          width: "10%",
          align: "center",
        },
        {
          title: "是否显示",
          key: "isShow",
          dataIndex: "isShow",
          width: "20%",
          align: "center",
          customRender: (text, record) => < a-switch checked={text == 1} onChange={() => this.onChangeShow(record, text)} />,
        },
        {
          title: '操作',
          width: "30%",
          scopedSlots: { customRender: 'operation' },
        },
      ],
      parentInfo: {}
    }
  },
  methods: {
    getPopupContainer() {
      return (triggerNode) => triggerNode.parentNode.parentNode;
    },
    //分页
    tableChange(current, size) {
      // 调用组件handleSubmit 有改变自己改下
      this.paginations.current = current;
      this.paginations.size = size;
      this.$refs.searchtable.getList(current, size);
    },
    // 关闭弹窗
    closeInfoModal (freshTable) {
      this.infoVisible = false;
      if (freshTable) {
        this.$refs.searchtable.getList(this.paginations.current, this.paginations.size);
      }
    },
    classifyAdd(childModal, record) {
      this.childModal = childModal;
      this.handle = 'add';
      this.infoVisible = true;
      this.currentRecord = record;
    },
    async classifyUpdate(record) {
      this.childModal = record.parentId == '0' ? false : true; //parentId == '0'是一级分类 否则是二级分类
      if(this.childModal) {
        this.parentInfo = await this.getPosterInfoById(record.parentId);
        console.log(this.parentInfo)
      }
      this.handle = 'update';
      this.infoVisible = true;
      this.currentRecord = record;
      console.log(record)
    },
    // 根据id查信息
    async getPosterInfoById(id) {
      let res = await this.$get('goldenhome/gh/poster_admin/poster/category/id', {id});
      if (res && res.returnCode === 1000) {
        return res.dataInfo
      }else {
        return {}
      }
    },
    // 改变状态接口
    async changeShow(params) {
      let res = await this.$post('goldenhome/gh/poster_admin/poster/category/update', params);
      if (res && res.returnCode === 1000) {
        this.$message.success('操作成功!')
        this.$refs.searchtable.refreshTable()
      }
    },
    // 是否显示
    onChangeShow(record, text) {
      console.log(record, text)
      let params = {
        isShow: text == 1 ? 0 : 1,
        id: record.id
      }
      this.changeShow(params);
    },
    // 删除菜单
    deleteRows (record) {
      if (record.children && record.children.length > 0) return this.$message.warn('该分类下面有海报模板,不能删除此分类')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          this.$post('goldenhome/gh/poster_admin/poster/category/delete', {
            id: record.id
          }).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.menu .ant-btn {
  margin-right: 20px;
  margin-bottom: 20px;
}
.paginations {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
</style>